<template>
    <div class="markdown-editor" style="height:500px">
        <div class="toolbar-container">
            <ToolBar @bold="boldHandler" @under="underHandler" @italic="italicHandler"/>
        </div>
        <div class="edite-area" ref="editeRef">
            <textarea class="left-edit" @click="clickHandler" @keyup="keyonHandler" @select="selectHanlder" v-model="orginText" @input="parseMark">
              
            </textarea>
            <div class="right-show" v-html="paseText">
            </div>
        </div>
    </div>
</template>

<script>
import ToolBar from './ToolBar'
import  MarkdownIt from 'markdown-it'
import {insertStr} from '@/utils/stringutil'
import { onMounted, ref } from 'vue'
import hljs  from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css';
const md = new MarkdownIt({
    html: false,
     highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return '<pre class="hljs"><code>' +
               hljs.highlight(lang, str, true).value +
               '</code></pre>';
      } catch (__) {}
    }

    return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
  }
})

const checkSelect = (star,end)=>{
    if(star == end){
        return false
    }
    return true
}

export default{
    components:{
        ToolBar
    },
    setup(){
        onMounted(()=>{
            
        })

        let orginText = ref('')

        let paseText = ref('');
        const parseMark = ()=>{
            paseText.value = md.render(orginText.value);
        }

        const editeRef = ref(null)
        const boldHandler = ()=>{
            if(checkSelect(selectObj.selectStart,selectObj.selectEnd)){
                let text = insertStr(orginText.value,selectObj.selectStart,"**")
                text = insertStr(text,selectObj.selectEnd+2,"**")
                orginText.value = text
            }else{
                let text = insertStr(orginText.value,selectObj.selectStart,'**加粗** ')
                 orginText.value = text
            }
            parseMark()
        }

        const underHandler = ()=>{
            if(checkSelect(selectObj.selectStart,selectObj.selectEnd)){
                let text = insertStr(orginText.value,selectObj.selectStart,"~~")
                text = insertStr(text,selectObj.selectEnd+2,"~~")
                orginText.value = text
            }else{
                let text = insertStr(orginText.value,selectObj.selectStart,'~~删除线~~')
                 orginText.value = text
            }
            parseMark()
        }

        const italicHandler = ()=>{
             if(checkSelect(selectObj.selectStart,selectObj.selectEnd)){
                let text = insertStr(orginText.value,selectObj.selectStart,"*")
                text = insertStr(text,selectObj.selectEnd+1,"*")
                orginText.value = text
            }else{
                let text = insertStr(orginText.value,selectObj.selectStart,'*斜体* ')
                 orginText.value = text
            }
            parseMark()
        }

        const selectObj = {
            selectStart: 0,
            selectEnd: 0
        }

        const selectHanlder = (event)=>{
            selectObj.selectStart = event.target.selectionStart
            selectObj.selectEnd = event.target.selectionEnd
        }

        const clickHandler = (e)=>{
             selectObj.selectStart = e.target.selectionStart
            selectObj.selectEnd = e.target.selectionEnd
        }

        const keyonHandler = (e)=>{
             selectObj.selectStart = e.target.selectionStart
            selectObj.selectEnd = e.target.selectionEnd
        }

        return {
            orginText,paseText,parseMark,boldHandler,editeRef,selectHanlder,clickHandler,underHandler,italicHandler,keyonHandler
        }
    }
}
</script>

<style lang="scss" scoped>
.markdown-editor{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    display: flex;
    flex-direction: column;
    background: #fff;
    .edite-area{
        display: flex;
        flex: 1;
        
        .left-edit{
            border: none;
            outline: none;
            padding: 10px;
            flex: 1;
            border-right: 1px solid #e1e4e8;
        }

        .right-show{
            padding: 10px;
            flex: 1;
        }
    }

    
}

</style>

<style lang="scss">
.markdown-editor{
    a{
        color: #3eaf7c;
        text-decoration: none;
    }

    table{
        border-collapse:collapse;

        tr:nth-child(even){
            background-color: #fff;
        }

        tr:nth-child(odd){
            background: #f9f9f9;
        }
    }

    tr{
        border-top: 1px solid #dddddd;
        border-bottom: 1px  solid #dddddd; 
    }

    td{
        padding: 8px;
        color: #333;
    }

    hr{
        margin-top: 20px;
        margin-bottom: 20px;
        border: 0;
        border-top: 1px solid #eee;
    }

}

</style>